<template>
  <div class="knowledge-intro" id="knowledge">
    <div class="course-wrap">
      <div class="txt-info">
        <div class="txt-row clearfix">
          <span class="fl row-name" style="letter-spacing: 3px">
            资源标签：
          </span>
          <span class="fl row-cont col">
            {{ knowledgeData.labelNames || '暂无标签' }}
          </span>
        </div>
        <div class="txt-row clearfix" v-if="showModule('glszd')">
          <span class="fl row-name" style="letter-spacing: 3px">
            {{ showModuleName('glszd') || '关联思政点' }}：
          </span>
          <span class="fl row-cont col">
            {{ educationList(knowledgeData) }}
          </span>
        </div>
        <div class="txt-row clearfix" v-if="type == 1 && showModule('kcszmb')">
          <span class="fl row-name">
            {{ showModuleName('kcszmb') || '课程思政目标' }}：
          </span>
          <span class="fl row-cont col" v-if="knowledgeData.eduTarget">
            {{ knowledgeData.eduTarget }}
          </span>
          <span class="fl row-cont col" v-else>暂无数据</span>
        </div>
        <div class="txt-row clearfix" v-if="showSuggest">
          <span class="fl row-name" v-if="type == 1 && showModule('rrcljy')">
            {{ showModuleName('rrcljy') || '融入策略建议' }}：
          </span>
          <span class="fl row-name" v-if="type > 1 && showModule('syjy')">
            {{ showModuleName('syjy') || '使用建议' }}：
          </span>
          <p
            class="fl row-cont col strategy-suggestion-content"
            v-if="knowledgeData.strategy"
            v-html="showContent(knowledgeData.strategy)"
          ></p>
          <p class="fl row-cont col strategy-suggestion-content" v-else>
            暂无数据
          </p>
          <div style="clear: both"></div>
          <div class="check-strategy">
            <el-button
              type="success"
              icon="el-icon-edit"
              size="small"
              v-if="showModule('xtpz')"
              @click="handleStrategy()"
              >{{ showModuleName('xtpz') || '协同批注' }}</el-button
            >
            <el-button
              type="warning"
              icon="el-icon-tickets"
              size="small"
              v-if="showModule('cnls')"
              @click="handleSuggest()"
              >{{ showModuleName('cnls') || '采纳历史' }}</el-button
            >
          </div>
        </div>
        <div class="txt-row clearfix" v-if="knowledgeData.field1">
          <span class="row-name"
            >{{ JSON.parse(knowledgeData.field1).name }}：</span
          >
          <span class="row-cont col">{{
            JSON.parse(knowledgeData.field1).content
          }}</span>
        </div>
        <div class="txt-row clearfix" v-if="knowledgeData.field2">
          <span class="row-name"
            >{{ JSON.parse(knowledgeData.field2).name }}：</span
          >
          <span class="row-cont col">{{
            JSON.parse(knowledgeData.field2).content
          }}</span>
        </div>
        <div class="txt-row clearfix" v-if="knowledgeData.field3">
          <span class="row-name"
            >{{ JSON.parse(knowledgeData.field3).name }}：</span
          >
          <span class="row-cont col">{{
            JSON.parse(knowledgeData.field3).content
          }}</span>
        </div>
      </div>
    </div>
    <Strategy />
    <SuggestHistory />
  </div>
</template>
<script>
import { LIBRARY } from '@/utils/config.js'
import Bus from '@/utils/bus.js'
import setInfo from '@/mixins/setInfo.js'
import { KnowledgeSetInfo } from '@/views/Admin/courseLibrary/mixins/KnowledgeSetInfo'
import homeConfig from '@/mixins/homeConfig'
export default {
  mixins: [homeConfig, setInfo, KnowledgeSetInfo],
  components: {
    Strategy: () => import('./Strategy.vue'),
    SuggestHistory: () => import('./SuggestHistory.vue'),
  },
  data() {
    return {
      type: this.$route.meta.type,
      curLibrary: {},
    }
  },
  props: ['knowledgeData'],
  computed: {
    showContent() {
      return function (v) {
        return v
          .replace(/&nbsp;/gi, '') //清除空格
          .replace(/\s+style="[^"]*"/g, '') //清除style样式
          .replace(/\<img/gi, '<img style="display: none;"') //设置图片class
      }
    },
    //是否显示使用建议
    showSuggest() {
      return this.type == 1
        ? this.showModule('rrcljy')
        : this.showModule('syjy')
    },
  },
  mounted() {
    this.curLibrary = LIBRARY.filter((v) => v.type == this.type)[0]
  },
  methods: {
    //协同批注
    handleStrategy() {
      //判断是否登录
      if (!this.$store.getters.userId) {
        this.loginTip()
        return
      }
      // 预览模式不触发事件
      if (this.$route.query.queryMode == 2) {
        this.previewTip()
        return
      }
      Bus.$emit('showDialogStrategy', this.knowledgeData)
    },
    //采纳历史
    handleSuggest() {
      if (!this.$store.getters.userId) {
        this.loginTip()
        return
      }
      Bus.$emit('showDialogSuggestHistory', this.knowledgeData)
    },
  },
}
</script>
<style scoped lang="scss" >
.knowledge-intro {
  background: #fff;
  width: 100%;
  .course-wrap {
    margin: 0 auto;
    margin-bottom: 30px;
    .col {
      color: #8c8c8c;
    }
    .txt-info {
      font-size: 16px;
      .txt-row {
        position: relative;
        width: 100%;
        line-height: 38px;
        min-height: 38px;
        .row-name {
          // position: absolute;
          // left: 0;
          // top: 0;
          font-weight: bold;
          // width: 115px;
          text-align: justify;
          display: inline-block;
          padding-left: 1em;
          &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 11px;
            width: 4px;
            height: 16px;
            background-color: var(--colorH1);
          }
        }
        .row-cont {
          // padding-left: 130px;
          color: #333;
          box-sizing: border-box;
        }
        .four-ellipsis {
          height: 100px;
          line-height: 24px;
        }
      }
    }
  }
  .check-strategy {
    height: 42px;
    .el-button--text {
      color: var(--colorH1);
    }
  }
}
#knowledge .strategy-suggestion-content p,
#knowledge .strategy-suggestion-content span,
#knowledge .strategy-suggestion-content {
  line-height: 38px !important;
  color: #333 !important;
  font-size: 16px !important;
}
</style>